<!--
 * @Descripttion: 
 * @version: 
 * @Author: zhang jianjun
 * @Date: 2022-06-20 11:33:28
 * @LastEditors: zhang jianjun
 * @LastEditTime: 2022-06-20 13:43:31
-->
<template>
  <div id="app">
    <ul class="nav">
      <li v-for="(item, index) in routes" :key="index">
        <router-link :to="item.path">{{ item.name }}</router-link>
      </li>
    </ul>
    <router-view />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
  components: {},
  data() {
    return {
      routes: [
        {
          name: "TinyMCE",
          path: "/Tinymce",
        },
        {
          name: "Quill",
          path: "/quill",
        },
        {
          name: "新闻",
          path: "/news",
        },
      ],
    };
  },
});
</script>

<style lang="scss" scope>
.nav {
  width: 100%;
  height: 44px;
  line-height: 44px;
  background-color: #666;
  list-style: none;
  color: #fff;
  li {
    display: inline-block;
    margin-right: 20px;
    text-decoration-line: none;
    a {
      color: #fff;
      text-decoration: none;
    }
  }
}
</style>
